<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Styles -->
    <style>
        /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}
    </style>

    <style>
        body {
            font-family: 'Nunito';
        }
        .div_width{
            width:500px;
        }
        .left_button{
            margin-right: 10px;
        }
        .command_button{
            width:120px;
        }
        .select_button{
            width:100px;
        }
    </style>
</head>
<body class="antialiased">
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">

    <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
        <a href="{{ route('login') }}" class="text-sm text-gray-700 underline">Login</a>
    </div>

    <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
        <div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
            <img src = "https://www.itchilds.com//uploads/allimg/20200529/1-2005291404401W.png" />
        </div>

        <div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
            <div class="grid grid-cols-1 md:grid-cols-2">
                <div class="p-6 div_width">
                    <div class="flex items-center" style="margin-bottom: 20px;">
                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                        <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laravel.com/docs" class="underline text-gray-900 dark:text-white" style="font-size: 20px;">无人机基础命令</a></div>
                    </div>

                    <div class="ml-12">
                        <!--<div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="设置wife" command_id="ap" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="iPhone 666666">Iphone</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="开始" command_id="command" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="">无</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>-->
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="查询电量" command_id="battery?" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="">无</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="起飞" command_id="takeoff" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="">无</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="向上" command_id = "up" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="20">20cm</option>
                                <option value="30">30cm</option>
                                <option value="40">40cm</option>
                                <option value="50">50cm</option>
                                <option value="100">100</option>
                                <option value="150">150cm</option>
                                <option value="200">200cm</option>
                                <option value="300">300cm</option>
                                <option value="400">400cm</option>
                                <option value="500">500cm</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="向左" command_id = "left" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="20">20cm</option>
                                <option value="30">30cm</option>
                                <option value="40">40cm</option>
                                <option value="50">50cm</option>
                                <option value="100">100</option>
                                <option value="150">150cm</option>
                                <option value="200">200cm</option>
                                <option value="300">300cm</option>
                                <option value="400">400cm</option>
                                <option value="500">500cm</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="向右" command_id="right" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="20">20cm</option>
                                <option value="30">30cm</option>
                                <option value="40">40cm</option>
                                <option value="50">50cm</option>
                                <option value="100">100</option>
                                <option value="150">150cm</option>
                                <option value="200">200cm</option>
                                <option value="300">300cm</option>
                                <option value="400">400cm</option>
                                <option value="500">500cm</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="向下" command_id="down" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="20">20cm</option>
                                <option value="30">30cm</option>
                                <option value="40">40cm</option>
                                <option value="50">50cm</option>
                                <option value="100">100</option>
                                <option value="150">150cm</option>
                                <option value="200">200cm</option>
                                <option value="300">300cm</option>
                                <option value="400">400cm</option>
                                <option value="500">500cm</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="向前" command_id="forward" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="20">20cm</option>
                                <option value="30">30cm</option>
                                <option value="40">40cm</option>
                                <option value="50">50cm</option>
                                <option value="100">100</option>
                                <option value="150">150cm</option>
                                <option value="200">200cm</option>
                                <option value="300">300cm</option>
                                <option value="400">400cm</option>
                                <option value="500">500cm</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="向后" command_id="back" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="20">20cm</option>
                                <option value="30">30cm</option>
                                <option value="40">40cm</option>
                                <option value="50">50cm</option>
                                <option value="100">100</option>
                                <option value="150">150cm</option>
                                <option value="200">200cm</option>
                                <option value="300">300cm</option>
                                <option value="400">400cm</option>
                                <option value="500">500cm</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="顺时针旋转" command_id="cw" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="90">90</option>
                                <option value="180">180</option>
                                <option value="270">270</option>
                                <option value="360">36o</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="逆时针旋转" command_id="ccw" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="90">90</option>
                                <option value="180">180</option>
                                <option value="270">270</option>
                                <option value="360">36o</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="翻滚" command_id="flip" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="l">左</option>
                                <option value="r">右</option>
                                <option value="f">前</option>
                                <option value="b">后</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="降落" command_id="land" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="">无</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>

                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="循环开始" command_id="forStart" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="2">2次</option>
                                <option value="3">3次</option>
                                <option value="4">4次</option>
                                <option value="5">5次</option>
                                <option value="10">10次</option>
                                <option value="15">15次</option>
                                <option value="20">20次</option>
                                <option value="30">30次</option>
                                <option value="40">40次</option>
                                <option value="50">50次</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button"></button>
                        </div>
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            <input type="button" class="btn btn-default command_button" value="循环结束" command_id="forEnd" disabled="disabled">
                            <select class = "btn btn-default left_button select_button">
                                <option value="end">END</option>
                            </select>
                            <button class="glyphicon glyphicon-plus btn btn-default left_button add_button hide"></button>
                        </div>
                    </div>
                </div>

                <div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-t-0 md:border-l div_width">
                    <div class="flex items-center" style="margin-bottom: 20px;">
                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                        <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laracasts.com" class="underline text-gray-900 dark:text-white" style="font-size: 20px;">待执行命令</a></div>
                    </div>

                    <div class="ml-12" id = "command_content">

                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-center mt-4 sm:items-center sm:justify-between" style="float: right;">
            <div class="text-center text-sm text-gray-500 sm:text-left">
                <div class="flex items-center">
                    <button class = "btn btn-default left_button send_command">执行命令</button>
                    <button class = "btn btn-default cls_command">重置命令</button>
                </div>
            </div>

            <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">

            </div>
        </div>
    </div>
</div>
</body>
</html>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    $(".add_button").on("click",function(){
        let num = $(this).prev().val();
        let command_id = $(this).prev().prev().attr("command_id");
        let label = $(this).prev().prev().val();
        let html_code = ' <div style="width:200px;"><input type = "button" class = "btn btn-default" value ="'+label+' '+num+'"command_id="'+command_id+' '+num+'" disabled="disabled" />  <button class="glyphicon glyphicon-remove btn btn-default" style="float:right;"></button></div>'
        //如果是循环开始按钮
        if(command_id==="forStart"){
            $(this).addClass("hide")
            $(this).parent("div").next().find("button").removeClass("hide")
        }
        //如果是循环结束按钮
        if(command_id==="forEnd"){
            $(this).addClass("hide")
            $(this).parent("div").prev().find("button").removeClass("hide")
        }

        $("#command_content").append(html_code);
    })

    $(".send_command").on("click",function(){
        let data = [];
        $("#command_content input").each(function(index){
            data[index] = $(this).attr("command_id");
        });
        console.log(data);
        $.ajax({
            url:"http://127.0.0.1:8080/doCommand",
            type:"post",
            data:{data:data.toString()},
            success:function(msg){
                console.log("success");
                console.log(msg);
                alert(msg)
            },error:function(msg){
                console.log("error");
                console.log(msg);
                alert(msg)
            }
        })
    })

    $(document).on("click","#command_content .glyphicon-remove",function(){
        $(this).parent("div").remove();
    })


</script>